var id =1;
function add(){
	var name = $("input[name='name']").val();
	var sex_val = $("input[name='sex']:checked").val();
	var hobbies = "";
	$("input[name='hobby']:checked").each(function(){
		hobbies += ($(this).val()+" ")
	})
	var addr = $("select[name = 'addr']").val();
	var html = "<tr id ='tr"+id+"'>"
					+"<td id ='td1"+id+"'>"+ id +"</td>"
					+"<td id ='td2"+id+"'>"+ name +"</td>"
					+"<td id ='td3"+id+"'>"+ sex_val +"</td>"
					+"<td id ='td4"+id+"'>"+ hobbies +"</td>"
					+"<td id ='td5"+id+"'>"+ addr +"</td>"
					+"<td id ='td6"+id+"'><a href = 'javascript:del("+id+");' >删除</a>"
					+"&nbsp;<a href = 'javascript:upd("+id+");' >修改</a></td>"
				+"</tr>"
	$("#tbody").append(html)
	id++;
}

function del(id){
	if(confirm("确认删除")){
		$("#tr"+id).remove();
	}
}

function upd(id){
	//修改时复现姓名
	var td2_val = $("#td2"+id).text();
	$("#td2"+id).html("<input type='text' id='tname"+id+"'>")
	$("#tname"+id).val(td2_val)
	//修改时复现性别
	var td3_val = $("#td3"+id).text();
	var t3 = "<label id='lab1' ><input type='radio' name='sex"+id+"' id='sex_id' value='男'/>男</label>"+
	"<label id='lab2'><input type='radio' name='sex"+id+"' id='sex_id' value='女'/>女</label>"
	$("#td3"+id).html(t3)
	$("input[name='sex"+id+"'][value='"+td3_val+"']").prop('checked',true);
	
	//修改时复现爱好
	var td4_val = $("#td4"+id).text();
	var t4 = "<label><input type='checkbox' name='hobby"+id+"'  value='健身' />健身</label>"+
	"<label><input type='checkbox' name='hobby"+id+"'  value='篮球'  />篮球</label>"+
	"<label><input type='checkbox' name='hobby"+id+"'  value='跑步'  />跑步</label>"
	$("#td4"+id).html(t4)
	$.each(td4_val.split(" "),function(i,n){
		$("input[name='hobby"+id+"'][value='"+n+"']").prop('checked',true);
	})
	//修改时复现地址
	var td5_val = $("#td5"+id).text();
	var t5 = "<select id='place' name='addr2"+id+"'>"
	+"<option value='山东'>山东</option>"
	+"<option value='北京'>北京</option>"
	+"<option value='河北'>河北</option>"
	+"</select>"
	$("#td5"+id).html(t5);
	$("select[name='addr2"+id+"']").val(td5_val);
	////修改时显示保存
	$("#td6"+id).html("<a href = 'javascript:save("+id+");'>保存</a>")	
}
	//保存修改后的值
function save(id){
	//获取修改后的值
	var name = $("tname"+id).val();
	var sex_val = $("input[name='sex"+id+"']:checked").val();
	var hobbies = "";
	$("input[name='hobby"+id+"']:checked").each(function(){
		hobbies += ($(this).val()+" ")
	})
	var addr = $("select[name = 'addr2"+id+"']").val();
	//把值放回
	$("#td2"+id).html(name);
	$("#td3"+id).html(sex_val);
	$("#td4"+id).html(hobbies);
	$("#td5"+id).html(addr);
	var t = "<a href = 'javascript:del("+id+");' >删除</a>"
	+"&nbsp;<a href = 'javascript:upd("+id+");' >修改</a>"
	$("#td6"+id).html(t);
	
}
function sel(){
	$("tbody tr").css("background",'')
	var name = $("input[name='name2']").val();
	var addr = $("select[name='addr2']").val();
	if(name==''&&addr=='')
	return
	$("tbody tr").each(function(){
		var n = $(this).find('td:eq(1)').text();
		var a = $(this).find('td:eq(4)').text();
		var b1 = (name==''||n.indexOf(name)>-1)
		var b2 = (addr==''||a==addr)
		if(b1&&b2){
			$(this).css("background",'green')
		}
	})
}
